<template>
  <div class="address-container">
    <Cascader
      ref="cascader"
      :query="queryUrl"
      :multiple="multiple"
      :style="{ width }"
      v-model="area"
      placeholder="所在地址"
      :httpMethod="httpMethod"
    />
  </div>
</template>

<script>
import Cascader from "@/components/CommonForm/Cascader"
export default {
  props: {
    value: {
      type: null,
      default: () => []
    },
    width: {
      type: String,
      default: "200px"
    },
    multiple: {
      type: Boolean,
      default: false
    },
    query: {
      type: String,
      default: ""
    },
    httpMethod: {
      type: String,
      default: "get"
    }
  },
  components: {
    Cascader
  },
  watch: {
    area: {
      deep: true,
      handler: function (val) {
        this.$emit("input", val)
      }
    }
  },
  data() {
    return {
      area: this.value,
      queryUrl: this.query
    }
  },
  created() {
    if (!this.query) {
      this.queryUrl = this.$api.common.select_all_area
    }
  },
  computed: {
    computedArea() {
      let str = ""
      if (Array.isArray(this.area)) {
        str = this.area.join("/")
      }
      return str
    }
  },
  methods: {
    setArea(val) {
      this.$nextTick(() => {
        this.area = val.slice(0).filter(Boolean)
      })
    }
  }
}
</script>

<script lang="ts" setup>
import Cascader from "@/components/CommonForm/Cascader"
import { defineEmits, getCurrentInstance, ComponentInternalInstance, ref, watch } from "vue"

interface Props {
  value: any[]
  width: string
  multiple: boolean
  query: string
  httpMethod: string
}
const { appContext } = getCurrentInstance() as ComponentInternalInstance
const queryUrl = appContext.config.globalProperties.$api.api1
const emit = defineEmits(["input"])

const props = withDefaults(defineProps<Props>(), {
  httpMethod: "get"
})
const area = ref(props.value)
/** 监听标题变化 */
watch(area, (value) => {
  emit("input", value)
})
</script>

<template>
  <div class="address-container">
    <Cascader
      ref="cascader"
      :query="queryUrl"
      :multiple="multiple"
      :style="{ width }"
      v-model="area"
      placeholder="所在地址"
      :httpMethod="httpMethod"
    />
  </div>
</template>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";
position: relative;
  display: inline-block;
  .hack-span {
    pointer-events: none;
    position: absolute;
    left: 123px;
    width: 153px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 18px;
    font-size: 14px;
    top: 50%;
    background: #fff;
    z-index: 2;
    transform: translateY(-50%);
  }
}
.el-popper.el-cascader__dropdown {
  .el-cascader-node__postfix {
    top: 10px; // 兼容ie箭头位置不正确
  }
}
</style>
